<template>
  <div class="loginBox">
    <div class="loginForm">
      <div class="title"><span>{{formType}}</span> · {{ sysInfo.systemName ? sysInfo.systemName:'小江江' }}</div>
      <el-form :model="loginInfo" :rules="rules" ref="ruleForm" v-if="this.formType == 'LOGIN'">
        <el-form-item prop="userName">
          <el-input class="item" v-model="loginInfo.userName" placeholder="账号" clearable><i slot="prepend" class="el-icon-s-custom"/></el-input>
        </el-form-item>
        <el-form-item prop="userPassword">
          <el-input class="item" type="password" placeholder="密码" v-model="loginInfo.userPassword" show-password clearable><i slot="prepend" class="el-icon-lock"/></el-input>
        </el-form-item>
        <el-form-item prop="verCodeData">
          <el-input class="itemCode" v-model="loginInfo.verCodeData" auto-complete="off" placeholder="请输入验证码" clearable></el-input>
          <div class="login-code" @click="refreshCode">
            <verCode :identifyCode="identifyCode" /><!--验证码组件-->
          </div>
        </el-form-item>
        <el-form-item>
          <div class="login-btn">
            <el-button type="primary" @click="submitForm" style="margin-left: auto;width: 35%">登录</el-button>
            <el-button plain type="primary" @click="goRegister" style="margin-left: 27%;width: 35%" >去注册</el-button>
          </div>
        </el-form-item>
      </el-form>
      <!-- 注册 -->
      <el-form :model="registerForm" :rules="rules" ref="ruleForm" v-if="this.formType == 'REGISTER'">
        <el-form-item prop="reCodeData">
          <el-input class="item" v-model="registerForm.reCodeData" placeholder="注册码" clearable><i slot="prepend" class="el-icon-s-custom"/></el-input>
        </el-form-item>
        <el-form-item prop="userNickName">
          <el-input class="item" v-model="registerForm.userNickName" placeholder="昵称" clearable><i slot="prepend" class="el-icon-s-custom"/></el-input>
        </el-form-item>
        <el-form-item prop="userPassword">
          <el-input class="item" type="password" placeholder="密码" v-model="registerForm.userPassword" show-password clearable><i slot="prepend" class="el-icon-lock"/></el-input>
        </el-form-item>
        <el-form-item prop="verPassword">
          <el-input class="item" type="password" placeholder="确认密码" v-model="registerForm.verPassword" show-password clearable><i slot="prepend" class="el-icon-lock"/></el-input>
        </el-form-item>
        <el-form-item prop="verCodeData">
          <el-input class="itemCode" v-model="registerForm.verCodeData" auto-complete="off" placeholder="请输入验证码" clearable></el-input>
          <div class="login-code" @click="refreshCode">
            <verCode :identifyCode="identifyCode" /><!--验证码组件-->
          </div>
        </el-form-item>
        <el-form-item>
          <div class="login-btn">
            <el-button plain type="primary" @click="this.refreshCode();this.formType = 'LOGIN'" style="margin-left: auto;width: 35%">去登录</el-button>
            <el-button type="primary" @click="register" style="margin-left: 27%;width: 35%" >注册</el-button>
          </div>
        </el-form-item>
      </el-form>
      <div class="sysInfo">
        <span>{{ sysInfo.systemName }}系统</span>
        <span>版本号：{{ sysInfo.systemVersion }}</span>
        <span>2023-{{ getNowYear() }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import {getIpAddress} from '@/utils/ip.js'
import verCode from '@/components/publicPackage/verCode.vue'
import { ElNotification } from 'element-plus'
import {useAuthStore} from '@/stores/index'
export default {
  components:{
    verCode,
  },
  data(){
    return{
      formType:'LOGIN',
      sysInfo:{},
      ipInfo:'',
      localStorageName:'',
      loginInfo:{
        userName:'',
        userPassword:'',
        verCodeData:''
      },
      registerForm:{
        userNickName:'',
        userPassword:'',
        verPassword:'',
        reCodeData:'',
        verCodeData:''
      },
      identifyCodes: '1234567890',//随机串内容
      identifyCode: '',
      rules: {// 校验
        userName:[{ required: true, message: "请输入账号", trigger: "blur" }],
        userPassword: [{ required: true, message: "请输入密码", trigger: "blur" }],
        verCodeData: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        reCodeData: [{ required: true, message: "请输入注册码", trigger: "blur" }],
        userNickName: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        verPassword: [{ required: true, message: "请确认密码", trigger: "blur" }]
      },
      auth:useAuthStore(),
    }
  },
  mounted(){
    this.$reGet.getSysInfoData().then(res=>{
      this.sysInfo = res.data.data;
      this.localStorageName = this.sysInfo.sysNumber+'AbsurdActz'
      this.auth.localStorageName = this.localStorageName
      this.auth.login()
      if(useAuthStore().isLoggedIn){this.$router.push('/Absurd')}else{this.$router.push('/login')}
    })
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
    getIpAddress().then(res=>{
      this.ipInfo = res;
    })
  },
  methods:{
    getNowYear(){
      return new Date().getFullYear();
    },
    refreshCode () {//刷新验证码
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    makeCode (o, l) {//生成验证码
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
      }
    },
    randomNum (min, max) {//随机数
      return Math.floor(Math.random() * (max - min) + min)
    },
    submitForm(){
      if (this.loginInfo.verCodeData.toLowerCase() !== this.identifyCode.toLowerCase()) {
        this.$message.info('请填写正确验证码');this.refreshCode()
      }
      else{
        if(!this.loginInfo.userName || !this.loginInfo.userPassword){ this.$message.error('请输入账号和密码') }
        else{
          let loginForm = {
            userName:this.loginInfo.userName,
            userPassword:this.loginInfo.userPassword,
            ip:this.ipInfo.ip,
            address:this.ipInfo.info.prov+this.ipInfo.info.city+this.ipInfo.info.isp,
            way:'login',
            remark:"后台登录",
            optType:'login'
          }
          this.$reGet.loginData(loginForm).then(res=>{
            if(res.data.code == 200){
              this.refreshCode()
              var message = '<strong>登录IP：<i>'
                +this.ipInfo.ip
                +'</i></strong><br><strong>登录地点：<i>'
                +this.ipInfo.info.prov+this.ipInfo.info.city+this.ipInfo.info.isp
                +'</i></strong><br><strong>登录时间：<i>'
                +res.data.data.loginTime
                +'</i></strong>'
              ElNotification({
                title: res.data.message,
                type: 'success',
                dangerouslyUseHTMLString: true,
                message: message,
              })
              localStorage.setItem(this.auth.localStorageName,JSON.stringify(res.data.data))//反 JSON.parse(localStorage.getItem('intellIgentInfo'))
              this.auth.login()
              setTimeout(()=>{this.$router.push('/Absurd')},1000)
            }else{
              this.$message.error(res.data.message)
              this.refreshCode()
            }
          }).catch(err=>{console.log(err);this.refreshCode();this.$message.error('ERROR：'+err.message)})
        }
      }
    },
    goRegister(){
      if(this.sysInfo.registerStatus == 'true'){
        this.formType = 'REGISTER';
        this.refreshCode();
      }else{
        this.$message.info('系统未开放注册，请联系管理！')
      }
    },
    register(){
      if (this.registerForm.verCodeData.toLowerCase() !== this.identifyCode.toLowerCase()) {
        this.$message.info('请填写正确验证码');this.refreshCode()
      }else{
        if(this.registerForm.userPassword != this.registerForm.verPassword){
          this.$message.info('两次密码输入不一致！')
        }else{
          if(this.registerForm.userNickName && this.registerForm.userPassword && this.registerForm.verPassword){
            let registerInfo = {
              userNickName:this.registerForm.userNickName,
              userPassword:this.registerForm.verPassword,
              reCodeData:this.registerForm.reCodeData,
              ip:this.ipInfo.ip,
              address:this.ipInfo.info.prov+this.ipInfo.info.city+this.ipInfo.info.isp,
              way:'register',
              remark:"注册",
              optType:'register'
            }
            this.$reGet.loginData(registerInfo).then(res=>{
              if(res.data.code == 200){
                this.refreshCode();
                this.$message.success(res.data.message)
                localStorage.setItem(this.auth.localStorageName,JSON.stringify(res.data.data))//反 JSON.parse(localStorage.getItem('intellIgentInfo'))
                this.auth.login()
                setTimeout(()=>{this.$router.push('/Absurd')},1000)
              }else{
                this.$message.error(res.data.message)
              }
            })
          }else{
            this.$message.error('请填写完整信息')
          }
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">

.loginBox{
  width: 100vw;
  min-width: 400px;
  height: 100vh;
  background: linear-gradient(to bottom,rgba(20, 215, 249, 0.703), rgba(251, 177, 18, 1));
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  .loginForm{
    width: 92%;
    max-width: 450px;
    max-height: 400px;
    padding-bottom: 30px;
    background-color: #84818173;
    border-radius: 10px;
    box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.575);
    .title{
      padding: 15px 0;
      font-size: 26px;
      text-align: center;
      color: #eee;
      font-weight:bolder; /*设置字体粗细*/
      -webkit-text-stroke:1px #cae5ff;        /*文字描边*/
      -webkit-text-fill-color:transparent;    /*设置文字的填充颜色*/
      display: flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      overflow: hidden;
      span{
        -webkit-text-stroke:1px #ffffff;        /*文字描边*/
        -webkit-text-fill-color:transparent;    /*设置文字的填充颜色*/
      }
    }
    .el-form{
      width:100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-flow: column;
      white-space: nowrap;
      .el-form-item{
        text-align: center;
        width:310px;
        padding: 3px 0;
        .item{
          width: 300px;
          margin: 0 auto;
        }
        .itemCode{
          width:180px;
        }
        .login-code{
          width:130px;
        }
        .login-btn{
          width: 100%;
          padding-top: 14px;
        }
      }
    }
    position: relative;
    .sysInfo{
      width: 300px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%,-50%);
      font-size: 12px;
      color: #eee;
      span{
        cursor: pointer;
      }
      span:hover{
        color: #057eff;
        transition: all 0.5s;
      }
    }
  }
}
</style>